<template>
  <div class="info-index">
    <van-nav-bar
      style="background-color:#0f0f0f;"
      :title="carinfo.cartype0"
      @click-left="onClickLeft"
    >
      <van-icon name="arrow-left" size="20px" color="#ffffff" slot="left" />
    </van-nav-bar>
    <div class="info-content" >
      <div class="content-html" v-html="carinfo.content"></div>
    </div>
    <div style="height:44px;width:100%;"></div>
    <div class="want-rent" @click="iWantRentCar">
      我要租车
    </div>
  </div>
</template>

<script>
import { NavBar,Icon } from 'vant';
import { CarMixin } from '../util/mixin.js';
export default {
  mixins: [CarMixin],
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
    iWantRentCar(){
      this.$router.push({path:'/want'})
    }
  },
  // async created(){
  //   await this.getCarShowInfo(this.$route.params.id);
  // },
  // async activated(){
  //   await this.getCarShowInfo(this.$route.params.id);
  // }
};
</script>

<style lang="scss" scoped>
.info-index {
  width: 100%;
  height: 100vh;
  .info-content{
    width: 100%;
    height:100%;
    overflow-x:hidden;
    overflow-y: auto;
    .content-html{
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-family: "PingFangSC-Regular";
      color: #4A4A4A;
      margin-bottom:44PX;
      img {
        width: 100%;
        height: auto;
        max-width: 100%;
        display: block;
      }
    }
  }
  .want-rent{
    position:fixed;
    bottom:0;
    width:100%;
    height:44px;
    line-height:44px;
    text-align:center;
    background-color:#0F0F0F;
    font-size:18px;
    color:#ffffff;
  }
}
.van-nav-bar__title {
  color: #ffffff;
}
.van-nav-bar__text {
  color: #ffffff;
}
</style>
